<template>
  <div class="seat-map">
    <p style="color: #2a2929">传递的值是：{{ message }}</p>
    <div
        v-for="row in row_data"
        :key="row"
        class="seat-row"
    >
      <el-button
          v-for="column in column_data"
          :key="`seat-${row}-${column}`"
          :type="getSeatType(row, column)"
          :class="{'is-disabled': isSeatSold(row, column)}"
          @click="selectSeat(row, column)"
          size="mini"
          style="width: 7px;font-size: 6px;display: flex;justify-content: center;align-items: center;"
      >
        {{ row }} {{column}}
      </el-button>
    </div>
    <el-button @click="click">选择</el-button>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  },
  data() {
    return {
      row_data:["A","B","C","D","E"],
      column_data:[1,2,3,4,5,6,7,8,9],
      // Array to keep track of sold and selected seats
      soldSeats: [['B', '1'], ['B', '2'], ['E', '5']], // Array of sold seat string pairs ["row", "column"]
      selectedSeats: [], // Array of selected seat string pairs ["row", "column"]，
      // message:"dfdfd"
    };
  },
  methods: {
    click(){
      alert(this.message)
      alert(JSON.stringify(this.selectedSeats))
    },
    getSeatType(row, column) {
      const seatId = this.getSeatId(row, column);
      if (this.soldSeats.some(seat => seat.join(',') === seatId)) {
        return 'danger'; // Indicate sold seat
      }
      if (this.selectedSeats.some(seat => seat.join(',') === seatId)) {
        return 'primary'; // Indicate selected seat
      }
      return 'default'; // Indicate available seat
    },
    isSeatSold(row, column) {
      const seatId = this.getSeatId(row, column);
      return this.soldSeats.some(seat => seat.join(',') === seatId);
    },
    selectSeat(row, column) {
      const seatId = this.getSeatId(row, column);
      if (this.isSeatSold(row, column)) {
        // Don't allow selection of sold seats
        return;
      }
      const index = this.selectedSeats.findIndex(seat => seat.join(',') === seatId);
      if (index === -1) {
        // Seat not selected yet, add to selected seats
        this.selectedSeats.push([row.toString(), column.toString()]);
      } else {
        // Seat already selected, remove from selected seats
        this.selectedSeats.splice(index, 1);
      }
    },
    getSeatId(row, column) {
      return [row.toString(), column.toString()].join(',');
    }
  }
};
</script>

<style scoped>
.seat-map {
  display: flex;
  flex-direction: column;
}
.seat-row {
  display: flex;
  justify-content: center;
  margin-bottom: 5px; /* Add some space below each row */
  margin-top: 5px;
}
.el-button.is-disabled {
  background-color: #f56c6c;
  color: white;
  cursor: not-allowed;
}
</style>
